<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const obj = { name: "laowang", age: 18 };

      /* 
        Proxy 对象用于创建一个对象的代理得到代理对象,代理对象的内容和原始对象保持一致
        如果我们使用的是代理对象,则可以实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
        - Proxy第一个参数是被转换目标对象
        - Proxy第二个参数是一个包含了很多捕获器函数的对象

        - 常见的捕获器方法:get set deleteProperty

        在捕获器中我们需要对数据进行对应的操作,我们使用Reflect进行对对象操作,Reflect提供的方法和获取器的方法是一一对应的,和普通对象的操作区别是:Reflect有返回值代表成功或者失败

      
      */
      const proxyObj = new Proxy(obj, {
        get(target, property) {
          console.log("进入get捕获器");
          // return target[property];
          return Reflect.get(target, property);
        },
        set(target, property, value) {
          console.log("进入set捕获器");
          // target[property] = value;
          return Reflect.set(target, property, value);
        },
        deleteProperty(target, property) {
          console.log("进入delete捕获器");
          // delete target[property];
          return Reflect.deleteProperty(target, property);
        },
      });
      console.log(proxyObj, "proxyObj");

      //获取
      console.log(proxyObj.name);

      //设置
      proxyObj.age = 19;
      console.log(proxyObj);

      //删除
      delete proxyObj.age;
      console.log(proxyObj);
    </script>
  </body>
</html>
